'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import VideoCard from './video-card';
import { VideoSelect } from '@/lib/database/repositories/video-repository';
import { useInView } from 'react-intersection-observer';

interface VideosProps {
  videos: VideoSelect[];
  page: number;
  total: number;
}

// 缓存已加载的页面数据
interface PageCacheType {
  [pageKey: string]: {
    videos: VideoSelect[];
    nextPageToLoad: number;
    // 增加时间戳便于判断缓存新旧
    timestamp: number;
    // 增加每页数据标记
    pageData: {
      page: number;
      startIndex: number;
      endIndex: number;
    }[];
  }
}

// 管理组件外的持久化缓存，在组件重新渲染间保持
const pageCache: PageCacheType = {};

// 预加载最大页数
const MAX_PRELOAD_PAGES = 10;
// 页面空闲时间阈值（毫秒）
const IDLE_THRESHOLD = 1000;

export default function Videos({   videos: initialVideos,   page: initialPage,   total}: VideosProps) {  const pathname = usePathname();  const searchParams = useSearchParams();
  
  // 页面状态
  const [videos, setVideos] = useState<VideoSelect[]>(initialVideos);
  const [currentPage, setCurrentPage] = useState<number>(initialPage);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [hasError, setHasError] = useState<boolean>(false);
  const [isPreloading, setIsPreloading] = useState<boolean>(false);
  
  // react-intersection-observer 钩子设置
  const { ref, inView } = useInView({
    threshold: 0,
    rootMargin: '300px', // 增大预加载区域，提前触发加载
    triggerOnce: false,
    delay: 100 // 添加延迟减少触发频率
  });
  
  // 页面缓存key
  const cacheKey = useRef(`${pathname}?${searchParams.toString()}`);
  const preloadQueue = useRef<number[]>([]);
  // 添加空闲计时器引用
  const idleTimerRef = useRef<NodeJS.Timeout | null>(null);
  
  // 清理函数引用
  const cleanupCachePagesRef = useRef<(key: string) => void>(() => {});
  
  // 每页显示的数量
  const pageSize = 24;
  
  // 计算总页数
  const totalPages = Math.ceil(total / pageSize);
  
  // 判断是否还有更多数据
  const hasMore = currentPage < totalPages;
  
  // 当URL参数或初始数据变化时重置状态
  useEffect(() => {
    const newCacheKey = `${pathname}?${searchParams.toString()}`;
    cacheKey.current = newCacheKey;
    
    // 检查是否有缓存
    if (pageCache[newCacheKey]) {
      setVideos(pageCache[newCacheKey].videos);
      setCurrentPage(pageCache[newCacheKey].nextPageToLoad - 1);
      console.log('[无限滚动] 从缓存加载数据, 页码:', pageCache[newCacheKey].nextPageToLoad - 1);
    } else {
      // 如果没有缓存，初始化缓存
      setVideos(initialVideos);
      setCurrentPage(initialPage);
      
      // 根据当前页面创建缓存
      if (initialPage > 1) {
        // 如果不是从第一页开始（URL中有page参数），则只缓存当前页的数据
        console.log('[无限滚动] 从第', initialPage, '页开始加载');
        pageCache[newCacheKey] = {
          videos: initialVideos,
          nextPageToLoad: initialPage + 1,
          timestamp: Date.now(),
          pageData: [{
            page: initialPage, 
            startIndex: 0, 
            endIndex: initialVideos.length - 1
          }]
        };
      } else {
        // 默认从第一页开始
        console.log('[无限滚动] 从第1页开始加载');
        pageCache[newCacheKey] = {
          videos: initialVideos,
          nextPageToLoad: initialPage + 1,
          timestamp: Date.now(),
          pageData: [{
            page: initialPage, 
            startIndex: 0, 
            endIndex: initialVideos.length - 1
          }]
        };
      }
      
      // 开始预加载下一页
      setTimeout(() => {
        if(initialPage < totalPages) {
          preloadQueue.current = [];
          preloadQueue.current.push(initialPage + 1);
        }
      }, 1500);
    }
    
    setHasError(false);
    
  }, [initialVideos, initialPage, searchParams, pathname, totalPages]);
  
  // 清理单个缓存条目中的页面数据，只保留最近的页数
  const cleanupCachePages = useCallback((key: string) => {
    const cache = pageCache[key];
    if (!cache || !cache.pageData || cache.pageData.length <= MAX_PRELOAD_PAGES) return;
    
    // 按页码排序
    const sortedPages = [...cache.pageData].sort((a, b) => a.page - b.page);
    
    // 只保留最新的MAX_PRELOAD_PAGES页
    const pagesToKeep = sortedPages.slice(-MAX_PRELOAD_PAGES);
    const pagesToRemove = sortedPages.slice(0, -MAX_PRELOAD_PAGES);
    
    if (pagesToRemove.length === 0) return;
    
    console.log('[缓存清理] 清理页面数据, 移除页码:', pagesToRemove.map(p => p.page));
    
    // 创建新的视频数组，只包含要保留的页面数据
    const newVideos: VideoSelect[] = [];
    
    cache.videos.forEach((video, index) => {
      // 检查当前视频是否在要保留的页面范围内
      let keep = false;
      for (const page of pagesToKeep) {
        if (index >= page.startIndex && index <= page.endIndex) {
          keep = true;
          break;
        }
      }
      
      if (keep) {
        newVideos.push(video);
      }
    });
    
    // 更新索引
    let currentIndex = 0;
    const updatedPageData = pagesToKeep.map(page => {
      const pageSize = page.endIndex - page.startIndex + 1;
      const newPage = {
        page: page.page,
        startIndex: currentIndex,
        endIndex: currentIndex + pageSize - 1
      };
      currentIndex += pageSize;
      return newPage;
    });
    
    // 更新缓存
    pageCache[key] = {
      ...cache,
      videos: newVideos,
      pageData: updatedPageData
    };
    
    console.log(`[缓存清理] 完成页面数据清理, 剩余视频数: ${newVideos.length}, 剩余页数: ${updatedPageData.length}`);
  }, []);
  
  // 更新引用
  useEffect(() => {
    cleanupCachePagesRef.current = cleanupCachePages;
  }, [cleanupCachePages]);
  
  // 加载指定页码的数据
  const fetchPageData = useCallback(async (pageToLoad: number, isPreload = false): Promise<VideoSelect[] | null> => {
    try {
      // 获取当前路径信息
      const urlParts = pathname.split('/').map(part => part.replace('.html', ''));
      const isSearchPage = urlParts.includes('search');
      const isNewestPage = urlParts.includes('newest');
      
      // 构建API URL
      let apiUrl = '';
      
      if (isSearchPage) {
        // 搜索页面
        const keyword = searchParams.get('keyword') || '';
        apiUrl = `/api/videos/search?keyword=${encodeURIComponent(keyword)}&page=${pageToLoad}`;
        
        console.log(isPreload ? '[预加载]' : '[无限滚动]', '搜索页请求URL:', apiUrl);
      } else if (isNewestPage) {
        // 最新上线页面
        apiUrl = `/api/videos/newest?page=${pageToLoad}`;
        
        console.log(isPreload ? '[预加载]' : '[无限滚动]', '最新上线页请求URL:', apiUrl);
      } else {
        // 分类页面或高分佳作页面
        const isTopRatedPage = urlParts.includes('top-rated');
        
        if (isTopRatedPage) {
          // 高分佳作页面 - 使用typeId=0获取所有影片并按评分排序
          apiUrl = `/api/videos?type=0&page=${pageToLoad}&sort=rating`;
          
          console.log(isPreload ? '[预加载]' : '[无限滚动]', '高分佳作页请求URL:', apiUrl);
        } else {
          // 常规分类页面 - 从URL中获取当前分类ID
          const typeIdMatch = pathname.match(/\/type\/(\d+)/);
          const typeId = typeIdMatch ? typeIdMatch[1] : urlParts[urlParts.length - 1].replace('.html', '');
          
          if (!typeId) {
            console.error(isPreload ? '[预加载]' : '[无限滚动]', '无法获取分类ID');
            return null;
          }
          
          // 提取年份和地区参数
          const years = searchParams.getAll('year');
          const areas = searchParams.getAll('area');
          const sort = searchParams.get('sort') || 'newest';
          
          // 检查是否有二级分类参数
          const typeParams = searchParams.getAll('type');
          
          // 构建API URL
          apiUrl = `/api/videos?type=${typeId}&page=${pageToLoad}`;
          
          // 如果存在二级分类参数，添加到URL中
          if (typeParams.length > 0) {
            apiUrl += `&subtypes=${typeParams.join(',')}`;
            console.log(isPreload ? '[预加载]' : '[无限滚动]', '发现二级分类参数:', typeParams);
          }
          
          // 添加筛选参数（如果有）
          if (years.length > 0) {
            apiUrl += `&year=${years.join(',')}`;
          }
          
          if (areas.length > 0) {
            apiUrl += `&area=${areas.join(',')}`;
          }
          
          if (sort) {
            apiUrl += `&sort=${sort}`;
          }
          
          console.log(isPreload ? '[预加载]' : '[无限滚动]', '分类页请求URL:', apiUrl);
        }
      }
      
      // 获取下一页数据
      console.log(isPreload ? '[预加载]' : '[无限滚动]', '发起请求:', apiUrl);
      const response = await fetch(apiUrl);
      
      if (!response.ok) {
        console.error(isPreload ? '[预加载]' : '[无限滚动]', '请求失败:', response.status, response.statusText);
        return null;
      }
      
      const data = await response.json();
      
      if (data.videos && Array.isArray(data.videos)) {
        if (data.videos.length === 0) {
          console.log(isPreload ? '[预加载]' : '[无限滚动]', '没有更多数据');
          return [];
        }
        
        console.log(
          isPreload ? '[预加载]' : '[无限滚动]', 
          '成功加载数据, 页码:', pageToLoad,
          '视频数量:', data.videos.length
        );
        
        return data.videos;
      } else {
        console.error(isPreload ? '[预加载]' : '[无限滚动]', '响应数据格式错误');
        return null;
      }
    } catch (error) {
      console.error(isPreload ? '[预加载]' : '[无限滚动]', '加载失败:', error);
      return null;
    }
  }, [pathname, searchParams]);
  
  // 预加载数据的函数
  const preloadNextPages = useCallback(async () => {
    if (isPreloading || preloadQueue.current.length === 0) return;
    
    const currentKey = cacheKey.current;
    const currentCache = pageCache[currentKey];
    if (!currentCache) return;
    
    setIsPreloading(true);
    
    try {
      const pageToPreload = preloadQueue.current[0];
      
      // 确认页码有效并且未超过总页数
      if (pageToPreload <= totalPages) {
        // 检查当前已缓存页数，如果已经达到最大预加载页数，不再继续预加载
        const cachedPagesCount = currentCache.pageData?.length || 0;
        if (cachedPagesCount >= MAX_PRELOAD_PAGES) {
          console.log(`[预加载] 已达到最大缓存页数(${MAX_PRELOAD_PAGES}页)，不再预加载`);
          preloadQueue.current = []; // 清空预加载队列
          return;
        }
        
        // 检查页码是否已存在于缓存中，避免重复加载
        const isPageAlreadyCached = currentCache.pageData?.some(p => p.page === pageToPreload);
        if (isPageAlreadyCached) {
          console.log(`[预加载] 页码 ${pageToPreload} 已存在于缓存中，跳过重复加载`);
          preloadQueue.current.shift(); // 从队列移除已存在的页码
          setIsPreloading(false);
          return;
        }
        
        const newVideos = await fetchPageData(pageToPreload, true);
        
        // 如果页面缓存key已变更，放弃此次预加载结果
        if (currentKey !== cacheKey.current) {
          console.log('[预加载] 放弃过时的预加载结果, 缓存key已变更');
          return;
        }
        
        if (newVideos && newVideos.length > 0) {
          // 更新缓存
          pageCache[currentKey] = {
            videos: [...currentCache.videos, ...newVideos],
            nextPageToLoad: pageToPreload + 1,
            timestamp: Date.now(),
            pageData: [
              ...(currentCache.pageData || []),
              {
                page: pageToPreload,
                startIndex: currentCache.videos.length,
                endIndex: currentCache.videos.length + newVideos.length - 1
              }
            ]
          };
          
          // 检查是否需要继续预加载
          if (pageCache[currentKey].pageData.length < MAX_PRELOAD_PAGES && pageToPreload + 1 <= totalPages) {
            preloadQueue.current.push(pageToPreload + 1);
          } else {
            console.log('[预加载] 已达到最大缓存页数或没有更多页面，停止预加载');
          }
          
          // 清理过多的页面数据
          cleanupCachePagesRef.current(currentKey);
        }
      }
      
      // 从队列移除已处理的页码
      preloadQueue.current.shift();
      
    } finally {
      setIsPreloading(false);
    }
  }, [fetchPageData, isPreloading, totalPages]);
  
  // 空闲时间检测和预加载
  const scheduleIdlePreload = useCallback(() => {
    // 如果已有计时器，先清除
    if (idleTimerRef.current) {
      clearTimeout(idleTimerRef.current);
      idleTimerRef.current = null;
    }
    
    // 设置新的空闲计时器
    idleTimerRef.current = setTimeout(() => {
      console.log('[空闲预加载] 检测到页面空闲');
      
      const currentKey = cacheKey.current;
      const currentCache = pageCache[currentKey];
      if (!currentCache) return;
      
      // 检查当前已缓存的页数
      const cachedPagesCount = currentCache.pageData?.length || 0;
      
      // 获取最后一个缓存页的页码
      const lastCachedPage = cachedPagesCount > 0
        ? Math.max(...currentCache.pageData.map(p => p.page))
        : currentPage;
      
      // 计算还需要预加载的页数
      const pagesToPreload = Math.min(
        MAX_PRELOAD_PAGES - cachedPagesCount,
        totalPages - lastCachedPage
      );
      
      if (pagesToPreload <= 0) {
        console.log('[空闲预加载] 已达到最大缓存页数或没有更多页面可预加载');
        return;
      }
      
      console.log(`[空闲预加载] 将预加载接下来的 ${pagesToPreload} 页内容`);
      
      // 清空当前预加载队列，添加新的预加载任务
      preloadQueue.current = [];
      
      // 将下一批页面添加到预加载队列，但先检查页面是否已缓存
      const alreadyCachedPages = new Set(currentCache.pageData.map(p => p.page));
      
      for (let i = 1; i <= pagesToPreload; i++) {
        const pageToAdd = lastCachedPage + i;
        if (pageToAdd <= totalPages && !alreadyCachedPages.has(pageToAdd)) {
          preloadQueue.current.push(pageToAdd);
        }
      }
      
      // 触发预加载
      if (preloadQueue.current.length > 0 && !isPreloading && !isLoading) {
        preloadNextPages();
      }
      
    }, IDLE_THRESHOLD);
  }, [currentPage, isLoading, isPreloading, preloadNextPages, totalPages]);
  
  // 当组件空闲时预加载下一页
  useEffect(() => {
    if (!isLoading && !isPreloading) {
      if (preloadQueue.current.length > 0) {
        // 优先处理已有的预加载队列
        const preloadTimeout = setTimeout(() => {
          preloadNextPages();
        }, 1000);
        
        return () => clearTimeout(preloadTimeout);
      } else {
        // 没有预加载任务时检测空闲状态，安排新的预加载任务
        scheduleIdlePreload();
        
        return () => {
          if (idleTimerRef.current) {
            clearTimeout(idleTimerRef.current);
            idleTimerRef.current = null;
          }
        };
      }
    }
  }, [isLoading, isPreloading, preloadNextPages, scheduleIdlePreload]);
  
  // 监听用户交互，重置空闲计时器
  useEffect(() => {
    const resetIdleTimer = () => {
      scheduleIdlePreload();
    };
    
    // 监听用户交互事件
    window.addEventListener('mousemove', resetIdleTimer);
    window.addEventListener('keydown', resetIdleTimer);
    window.addEventListener('scroll', resetIdleTimer);
    window.addEventListener('touchstart', resetIdleTimer);
    
    // 初始启动空闲计时器
    scheduleIdlePreload();
    
    return () => {
      window.removeEventListener('mousemove', resetIdleTimer);
      window.removeEventListener('keydown', resetIdleTimer);
      window.removeEventListener('scroll', resetIdleTimer);
      window.removeEventListener('touchstart', resetIdleTimer);
      
      if (idleTimerRef.current) {
        clearTimeout(idleTimerRef.current);
        idleTimerRef.current = null;
      }
    };
  }, [scheduleIdlePreload]);
  
  // 加载更多数据的函数
  const loadMore = useCallback(async () => {
    if (isLoading || !hasMore) return;
    
    console.log('[无限滚动] 触发加载更多, 当前页码:', currentPage, '总页数:', totalPages);
    
    // 设置加载状态
    setIsLoading(true);
    
    try {
      const currentKey = cacheKey.current;
      const currentCache = pageCache[currentKey];
      
      if (currentCache && currentCache.nextPageToLoad > currentPage + 1) {
        // 如果下一页数据已经被预加载，直接使用缓存的数据
        console.log('[无限滚动] 使用缓存的预加载数据, 当前页码:', currentPage, '下一页:', currentCache.nextPageToLoad - 1);
        setVideos(currentCache.videos);
        setCurrentPage(currentCache.nextPageToLoad - 1);
        
        // 尝试继续预加载更多页
        if (preloadQueue.current.length === 0 && currentCache.nextPageToLoad <= totalPages) {
          preloadQueue.current.push(currentCache.nextPageToLoad);
        }
        
        // 检查并清理过多的页面数据
        cleanupCachePagesRef.current(currentKey);
      } else {
        // 没有缓存的数据，实时加载
        const nextPage = currentPage + 1;
        
        // 检查页码是否已存在于缓存中，避免重复加载
        const isPageAlreadyCached = currentCache?.pageData?.some(p => p.page === nextPage);
        if (isPageAlreadyCached) {
          console.log(`[无限滚动] 页码 ${nextPage} 已存在于缓存中，跳过重复加载`);
          // 找出在缓存中的位置
          const existingVideos = currentCache.videos;
          setVideos(existingVideos);
          setCurrentPage(nextPage);
          setIsLoading(false);
          return;
        }
        
        const newVideos = await fetchPageData(nextPage);
        
        if (newVideos === null) {
          throw new Error('加载失败');
        }
        
        if (newVideos.length > 0) {
          // 更新状态和缓存
          const updatedVideos = [...videos, ...newVideos];
          setVideos(updatedVideos);
          setCurrentPage(nextPage);
          
          // 更新缓存
          pageCache[currentKey] = {
            videos: updatedVideos,
            nextPageToLoad: nextPage + 1,
            timestamp: Date.now(),
            pageData: [
              ...(currentCache?.pageData || []),
              { 
                page: nextPage, 
                startIndex: videos.length, 
                endIndex: updatedVideos.length - 1 
              }
            ]
          };
          
          // 如果还有更多页可以加载，添加到预加载队列
          if (nextPage + 1 <= totalPages) {
            preloadQueue.current.push(nextPage + 1);
          }
          
          // 检查并清理过多的页面数据
          cleanupCachePagesRef.current(currentKey);
        }
      }
    } catch (error) {
      console.error('[无限滚动] 加载失败:', error);
      setHasError(true);
    } finally {
      // 延迟重置加载状态，防止快速滚动触发多次加载
      setTimeout(() => {
        setIsLoading(false);
      }, 500);
    }
  }, [currentPage, fetchPageData, hasMore, isLoading, totalPages, videos]);
  
  // 滚动到底部监听器触发加载更多
  useEffect(() => {
    // 所有设备上启用无限滚动
    if (!inView || isLoading || !hasMore) return;
    
    const timer = setTimeout(() => {
      console.log('[无限滚动] 监测到视图进入，触发加载更多');
      loadMore();
    }, 200);
    
    return () => clearTimeout(timer);
  }, [inView, isLoading, hasMore, loadMore]);
  
  // 渲染加载错误状态
  const renderError = () => {
    if (!hasError) return null;
    
    return (
      <div className="py-4 text-center">
        <p className="text-red-500 mb-2">加载失败，请检查网络连接</p>
        <button 
          onClick={() => {
            setHasError(false);
            // 延迟执行，确保状态更新后再次尝试
            setTimeout(() => loadMore(), 100);
          }}
          className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
        >
          重试
        </button>
      </div>
    );
  };

  // 渲染视频列表
  const renderVideoList = () => {
    // 没有数据时显示暂无数据的提示
    if (videos.length === 0 && !isLoading) {
      return (
        <div className="py-12 text-center">
          <svg 
            className="w-12 h-12 mx-auto text-gray-500 mb-4" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24" 
            xmlns="http://www.w3.org/2000/svg"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={1.5} 
              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" 
            />
          </svg>
          <p className="text-gray-400 text-lg">暂无数据</p>
        </div>
      );
    }

    return (
      <div className="relative overflow-x-safe">
        {/* 网格布局视频列表 */}
        <div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2 sm:gap-3 md:gap-4">
          {videos.map((video, index) => (
            <VideoCard key={`${video.id}_${index}`} video={video} />
          ))}
        </div>
        
        <div className="mt-6">
          {/* 加载更多指示器 - 所有设备显示 */}
          {hasMore && (
            <div 
              ref={ref} 
              className="flex items-center justify-center py-8 text-center"
            >
              {isLoading ? (
                <div className="inline-block h-6 w-6 animate-spin rounded-full border-4 border-solid border-gray-200 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
              ) : (
                <span className="text-gray-500 text-sm">加载更多</span>
              )}
            </div>
          )}
          
          {/* 数据预加载指示器 - 所有设备显示 */}
          {isPreloading && !isLoading && hasMore && (
            <div className="fixed bottom-4 right-4 bg-gray-800/70 rounded-full p-1.5 z-10 shadow-md">
              <div className="w-3 h-3 bg-gray-400 rounded-full animate-ping"></div>
            </div>
          )}
          
          {/* 所有内容已加载提示 - 所有设备显示 */}
          {!hasMore && videos.length > 0 && (
            <div className="py-4 text-center text-gray-500 text-sm">
              已加载全部内容
            </div>
          )}
        </div>
      </div>
    );
  };

  // 清理缓存的函数
  useEffect(() => {
    // 缓存清理 - 只保留当前页面的缓存，当页面数量超过5时
    const cleanupCache = () => {
      const cacheKeys = Object.keys(pageCache);
      if (cacheKeys.length > 5) {
        // 保留当前使用的缓存
        const currentKey = cacheKey.current;
        const newCache: PageCacheType = {};
        
        // 只保留当前的缓存
        if (pageCache[currentKey]) {
          newCache[currentKey] = pageCache[currentKey];
        }
        
        // 更新缓存对象
        Object.keys(pageCache).forEach(key => {
          if (key !== currentKey) {
            delete pageCache[key];
          }
        });
        
        Object.keys(newCache).forEach(key => {
          pageCache[key] = newCache[key];
        });
        
        console.log('[缓存清理] 完成, 剩余缓存数:', Object.keys(pageCache).length);
      }
    };
    
    // 仅在需要时触发缓存清理
    cleanupCache();
    
    // 组件卸载时清理超过10分钟未使用的缓存
    return () => {
      Object.keys(pageCache).forEach(key => {
        // 在实际应用中，可以为缓存添加时间戳来识别长时间未使用的项
        // 这里我们简化处理，仅作为示例
        if (key !== cacheKey.current) {
          delete pageCache[key];
        }
      });
    };
  }, []);

  return (
    <div className="space-y-4 sm:space-y-6">
      {renderVideoList()}
      
      {renderError()}
    </div>
  );
} 